<template>
    <button class="generate-story-btn" @click="goToFastStory">快速故事阅读</button>

    <div class="today-view">
        <h1>今日单词</h1>
        
        <!-- 添加"生成故事"按钮 -->
        <button class="generate-story-btn" @click="goToStory">生成故事</button>
        
        <div v-if="words.length > 0" class="word-list">
            <div v-for="(word, index) in words" :key="index" class="word-item">
                <h3>{{ word.word }}</h3>
               
                <div v-if="word.translations && word.translations.length > 0">
                    <p><strong>词义:</strong></p>
                    <ul>
                        <li v-for="(translation, tIndex) in word.translations" :key="tIndex">
                            {{ translation.wordType }}. {{ translation.cnTran }}
                        </li>
                    </ul>
                </div>
                
            </div>
        </div>
        <div v-else class="no-words">
            <p>今日没有单词。</p>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request";

export default {
    name: "Today",
    data() {
        return {
            words: [], // 存储今日单词
        };
    },
    methods: {
        goToFastStory() {
        this.$router.push('/fast-story');
        },
        fetchTodayWords() {
            // 从 localStorage 获取用户信息
            let userJson = localStorage.getItem("user");
            let user = JSON.parse(userJson);

            // 调用后端接口，传递 userID 参数
            request
                .get("/memory/todayLearnedWords", {
                    params: {
                        userID: user.userID, // 添加 userID 参数
                    },
                })
                .then((response) => {
                    this.words = response.data; // 将返回的数据赋值给 words
                })
                .catch((error) => {
                    console.error("获取今日单词失败：", error);
                });
        },
        // 添加跳转到Story界面的方法
        goToStory() {
            this.$router.push('/story');
        }
    },
    created() {
        this.fetchTodayWords(); // 组件创建时调用方法获取数据
    },
};
</script>

<style scoped>
.today-view {
    padding: 20px;
    font-family: Arial, sans-serif;
}

/* 添加"生成故事"按钮样式 */
.generate-story-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 20px;
    transition: background-color 0.3s;
}

.generate-story-btn:hover {
    background-color: #45a049;
}

.word-list {
    margin-top: 20px;
}

.word-item {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.word-item h3 {
    margin: 0;
    color: #333;
}

.word-item p {
    margin: 5px 0;
    color: #666;
}

.word-item ul {
    margin: 5px 0;
    padding-left: 20px;
    list-style-type: disc;
}

.word-item ul li {
    margin: 3px 0;
}

.no-words {
    margin-top: 20px;
    color: #999;
    font-style: italic;
}
</style>